<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>yyb</title>
    <style>
        .ybb {
            height: 500px;
            width: 800px;
            margin: 100px auto;
            position: relative;
            background-color: #C4FCEF;
            box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3);
        }

        .cot>span {
            font-family: "lucida sans unicode";
            font-size: 20px;
            width: 50px;
            height: 30px;
            border: 1px solid #ccc;
            display: inline-block;
            text-align: center;
            margin: 3px;
            box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
            background-color: rgba(0, 201, 167, .5)
        }

        .cot>span:hover {
            background-color: #4B4453;
            color: white;
            cursor: pointer;
            box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
        }

        .ybb>h3 {
            padding-top: 30px;
            text-align: center;
        }

        .ybb>div>.content {
            display: flex;
            justify-self: start;
            align-items: center;
            margin-top: 10px;
            margin-left: 80px;
        }

        .ybb>div {
            margin-top: -50px;
        }

        .title {
            writing-mode: vertical-lr;
            position: relative;
            top: 90px;
            left: 20px;
            width: 30px;
            height: 60px;
            text-align: center;
            line-height: 30px;
            font-size: 20px;
            background-color: #FF9671;
            box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
        }

        .yy>.title {
            top: 130px;
        }

        .content>.tit {
            width: 60px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background-color: #009EFA;
            box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.2);
            color: #fff;
        }

        a {
            position: relative;
            left: calc(50% - 80px);
            top: -50px;
            text-decoration: none;
            color: #009EFA;
        }

        body {
            overflow: hidden;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>

<body>
    <div class="ybb">
        <h3>英语音标表</h3>
        <div class="yy">
            <div class="title">元音</div>
            <div class="content">
                <div class="tit">长元音</div>
                <div class="cot">
                    <span m="iː" class="">iː</span><span m="ɜː" class="">ɜː</span><span m="ɑː" class="">ɑː</span><span
                        m="ɔː" class="">ɔː</span><span m="uː" class="">uː</span>
                </div>
            </div>
            <div class="content">
                <div class="tit">短元音</div>
                <div class="cot">
                    <span m="ɪ" class="">ɪ</span><span m="e" class="">e</span><span m="æ" class="">æ</span><span m="ə"
                        class="">ə</span><span m="ʌ" class="">ʌ</span><span m="ɒ" class="">ɒ</span><span m="ʊ"
                        class="">ʊ</span>
                </div>
            </div>
            <div class="content">
                <div class="tit">双元音</div>
                <div class="cot">
                    <span m="eɪ" class="">eɪ</span><span m="aɪ" class="">aɪ</span><span m="ɔɪ" class="">ɔɪ</span><span
                        m="əʊ" class="">əʊ</span><span m="aʊ" class="">aʊ</span><span m="ɪə" class="">ɪə</span><span
                        m="eə" class="">eə</span><span m="ʊə" class="">ʊə</span>
                </div>
            </div>
        </div>
        <div class="fy">
            <div class="title">辅音</div>
            <div class="content">
                <div class="tit">清辅音</div>
                <div class="cot">
                    <span m="p" class="">p</span><span m="t" class="">t</span><span m="k" class="">k</span><span m="f"
                        class="">f</span><span m="θ" class="">θ</span><span m="s" class="">s</span><span m="ʃ"
                        class="">ʃ</span><span m="h" class="">h</span><span m="tʃ" class="">tʃ</span><span m="ts"
                        class="">ts</span><span m="tr" class="">tr</span>
                </div>
            </div>
            <div class="content">
                <div class="tit">浊辅音</div>
                <div class="cot">
                    <span m="b" class="">b</span><span m="d" class="">d</span><span m="g" class="">ɡ</span><span m="v"
                        class="">v</span><span m="ð" class="">ð</span><span m="z" class="">z</span><span m="ʒ"
                        class="">ʒ</span><span m="r" class="">r</span><span m="dʒ" class="">dʒ</span><span m="dz"
                        class="">dz</span><span m="dr" class="">dr</span><br>
                    <span m="m" class="">m</span><span m="n" class="">n</span><span m="ŋ" class="">ŋ</span><span m="l"
                        class="">l</span><span m="j" class="">j</span><span m="w" class="">w</span>
                </div>
            </div>
        </div>
    </div>

    <a href="https://www.bilibili.com/video/BV1iV411z7Nj?p=3" target="_blank">发音截取自B站英语兔</a>

    <script>
        $("span").click(function () {
            let url = "./yp/" + $(this).attr('m') + '.mp3';
            let mp3 = new Audio(url);
            mp3.play();
        })
    </script>
</body>

</html>